@import '@/less/common.less';

page {
  padding: 0px 20px 20px 20px;
}

.recipe-add {
  .safe-area();

  .block {
    height: 20px;
  }

  .hr {
    width: 100%;
  }

  .step-01 {
    .input-title {
      width: 100%;

      input {
        color: #333333;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        height: 80px;
      }
    }

    .tip {
      color: #666666;

      .top {
        color: #333333;
        font-weight: bold;
      }

      .tip-line {
        width: 8%;
        height: 6px;
        .radius();
        background-color: @themeColor;
      }
    }
  }

  .step-02 {
    .container {
      .radius();
      overflow: hidden;
    }

    .upload {
      background-color: #dddddd;
      width: 100%;
      height: 80vw;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #666666;
      font-size: 35px;
    }

    .cover-image {
      Image {
        width: 100%;
        height: 80vw;
      }
    }

    .title {
      text-align: center;
      font-size: 50px;
      font-weight: bold;
      margin-top: 20px;
    }

    .tip {
      color: #dddddd;
    }
  }

  .step-03 {

    .title {
      font-weight: bold;
      font-size: 35px;
    }

    .material-list {
      padding: 0 20px;

      .item {
        // background-color: #f7f8fa;
        padding: 10px 0;
        display: flex;

        .van-icon {
          display: flex;
          align-items: center;
        }

        Textarea {
          width: 100%;
        }

        .name {
          margin-right: 20px;
          display: flex;
          align-items: center;
          width: 40%;

          .del {
            margin-right: 20px;
          }
        }

        .amount {
          display: flex;

          .adjust {
            width: 100%;
            padding-left: 30px;
            display: flex;
            align-items: center;

            .text {
              flex: 1;
            }

            .up-down {
              margin-left: 30px;
              display: flex;

              .up {
                transform: rotate(180deg);
              }

              .down {
                margin-left: 30px;
              }
            }
          }

          .van-stepper {
            display: flex;
            align-items: center;
          }

          .unit {
            margin-left: 20px;
            flex: 1;
            display: flex;
            align-items: center;
            min-height: var(--stepper-input-height, 56px);
            padding: var(--padding-base, 8px);
            margin: 2px;
          }
        }

        .amount {
          flex: 1;
        }
      }

      .guess {
        flex-direction: column;

        .des {
          font-size: 24px;
          color: #666666;
        }

        .group {
          display: flex;
          margin-top: 10px;

          .g-item {
            padding: 10px 15px;
            background-color: #f2f2f2;
            margin-left: 20px;
          }
        }
      }

      .control {
        display: flex;
        justify-content: space-between;
        color: @themeColor;
      }

      .item:not(:first-child) {
        border-top: 1px dashed #ebedf0;
      }
    }
  }

  .step-04 {

    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      Text:nth-child(1) {
        font-weight: bold;
        font-size: 35px;
      }

      Text:nth-child(2) {
        color: @themeColor;
      }
    }

    .step-list {
      padding: 0 20px;

      .item {
        // background-color: #f7f8fa;
        margin-bottom: 50px;

        &.control {
          display: flex;
          color: @themeColor;
        }

        .top {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          .delStep {
            color: @themeColor;
          }

          .dec {
            font-weight: 600;
            font-size: 30px;
          }
        }

        .image {
          margin-top: 20px;
          .radius();
          background-color: #dddddd;
          color: #666666;
          overflow: hidden;

          .image-tip {
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          Image {
            width: 100%;
            height: 550px;
          }
        }

        .step-input {
          margin-top: 20px;
        }

        Textarea {
          width: 100%;
        }
      }
    }
  }

  .step-05 {

    .title {
      font-weight: bold;
      font-size: 35px;
    }

    .tip-input {
      margin: 30px 0;
    }

    .difficulty {
      margin: 30px 0;
      display: flex;
      overflow: auto;

      .d-btn {
        padding: 15rpx 20rpx;
        margin-right: 20px;
        flex-shrink: 0;
        background-color: #ebedf0;
        font-size: 30px;
        transition: all .3s;

        &.active {
          background-color: #ed5814;
          color: #ffffff;
        }

        .radius();
      }
    }

    .cats {
      margin: 30px 0;
      display: flex;
      overflow: auto;

      .tag {
        flex-shrink: 0;
        margin-right: 30px;
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    color: @themeColor;
    font-size: 30px;
    margin-top: 30px;
    .safe-area();
  }

  .cat-input {
    z-index: 10;
    .safe-area();
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    bottom: 30%;
    left: 0;

    .container {
      display: flex;
      padding: 20px 20px;

      Input {
        background-color: #f7f8fa;
        width: 100%;
        border-radius: 30px;
        padding: 10px var(--cell-horizontal-padding, 32rpx);
      }


    }
  }

  .require {
    text-align: right;
    padding: 0 20px;
    color: red;
    opacity: .8;
  }

  .my-pop {
    padding-bottom: 50px;

    .main {
      .safe-area();
    }
  }
}
